import React,{useCallback} from 'react';
import Header from '@/component/layout/Header/Header';
import { Link } from 'react-router-dom';
import { Button } from 'antd-mobile';
import { connect } from "react-redux";
import Cookies from 'js-cookie'

import './style.less';

const UserCenter = (props) => {
  const { toLoginout } = props;

  const logout = useCallback(() => {
    toLoginout();
    Cookies.remove('token');
    Cookies.remove('role');
    Cookies.remove('userId');
    Cookies.remove('pwd');
  }, [toLoginout])
  return (
    <>
      <Header center={<span>个人中心</span>} />
      <div className="global-content UserCenter-box">
        <div className="UserCenter-box-item-b">
          <Link to="/studyRecord">
            <div className="UserCenter-box-item">
              <img src={require('../../assests/img/userc0-1.png')} alt="" />
              <p>每日一学</p>
              <p>学习记录</p>
            </div>
          </Link>
          <Link to="/memo">
            <div className="UserCenter-box-item">
              <img src={require('../../assests/img/userc1-1.png')} alt="" />
              <p>每日一记</p>
            </div>
          </Link>

          <div className="forget-box">
            <Button type="primary" onClick={logout}> 退出登录</Button>
            <Link to="/modifyPwd">
              <Button type="primary" className="forget"> 忘记密码</Button>
            </Link>
          </div>

          {/* <p >忘记密码</p> */}
        </div>
      </div>
    </>
  )
}


const mapDispatchToProps = {
  toLoginout: ()=> ({type: 'LOGOUT'})
}

// export default UserCenter 
export default connect(null, mapDispatchToProps)(UserCenter);